<!--
 * @Author: ljc
 * @Date: 2024-09-06 16:49:23
 * @LastEditors: ljc
 * @LastEditTime: 2025-05-08 11:27:09
 * @Description: 按钮组组件
-->
<template>
  <static-content-wrapper :designer="designer"
    :field="field"
    :design-state="designState"
    :display-style="field.options.displayStyle"
    :parent-widget="parentWidget"
    :parent-list="parentList"
    :index-of-parent-list="indexOfParentList"
    :sub-form-row-index="subFormRowIndex"
    :sub-form-col-index="subFormColIndex"
    :sub-form-row-id="subFormRowId">
    <div :class="field.options.displayStyle === 'block' ? 'flex': 'inline_flex'">
      <span class="button-group-left">
        <RkButtonGroup v-model="leftValue"
          v-model:label='leftLabel'
          :options="field.options.fieldOptions"
          :allDisabled="field.options.disabled"
          :size="widgetSize"
          @change="onLeftBtnClick"> {{field.options.label}}</RkButtonGroup>
      </span>
      <template v-if="!field.options.rightHidden">
        <span class="button-group-right"
          style="margin-left: 10px;">
          <RightButtonGroup v-model="rightValue"
            v-model:label='rightLabel'
            :options="options"
            :size="widgetSize"
            :allDisabled="field.options.disabled"
            @click="onRightBtnClick">
          </RightButtonGroup>
        </span>
      </template>
    </div>
  </static-content-wrapper>
</template>
  
  <script>
import StaticContentWrapper from '@/components/form-designer/form-widget/field-widget/static-content-wrapper.vue'
import emitter from '@/utils/emitter'
import i18n, { translate } from "@/utils/i18n";
import fieldMixin from "@/components/form-designer/form-widget/field-widget/fieldMixin";
import { RkButtonGroup, RightButtonGroup } from '@/components/vf-button'

export default {
  name: "button-group-widget",
  componentName: 'FieldWidget',  //必须固定为FieldWidget，用于接收父级组件的broadcast事件
  mixins: [emitter, fieldMixin, i18n],
  props: {
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false
    },
    subFormRowIndex: { /* 子表单组件行索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormColIndex: { /* 子表单组件列索引，从0开始计数 */
      type: Number,
      default: -1
    },
    subFormRowId: { /* 子表单组件行Id，唯一id且不可变 */
      type: String,
      default: ''
    },
  },
  components: {
    RkButtonGroup,
    RightButtonGroup,
    StaticContentWrapper,
  },
  data() {
    return {
      leftValue: '',
      leftLabel: '',
      rightValue: '',
      rightLabel: ''
    }
  },
  watch: {
    'field.options.fieldOptions': {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue && newValue.length > 0) {
          const defaultItem = newValue.find((item) => item.default === true);
          this.leftValue = defaultItem ? defaultItem.value : '';
          this.leftLabel = defaultItem ? defaultItem.label : '';
        } else {
          this.field.options.rightHidden = true
          this.field.options.buttonCurrentValue = ''
        }
      }
    },
    'leftValue': {
      deep: true,
      immediate: true,
      handler(newValue, oldValue) {
        if (newValue) {
          this.field.options.buttonCurrentValue = newValue
        }
      }
    },
    'field.options.buttonCurrentValue': {
      deep: true,
      immediate: false,
      handler(newValue, oldValue) {
        if (newValue) {
          this.leftValue = newValue
        }
      }
    }
  },
  computed: {
    options() {
      let array = this.leftValue ? this.field.options.rightFieldOption[this.leftValue] : []
      return array
    }
  },
  beforeCreate() {
    /* 这里不能访问方法和属性！！ */
  },
  created() {
    /* 注意：子组件mounted在父组件created之后、父组件mounted之前触发，故子组件mounted需要用到的prop
       需要在父组件created中初始化！！ */
    this.registerToRefList()
    this.initEventHandler()
    this.handleOnCreated()
  },
  mounted() {
    this.handleOnMounted()
  },
  beforeUnmount() {
    this.unregisterFromRefList()
  },
  methods: {
    /**
     * 左侧按钮组点击触发
     */
    onLeftBtnClick(item) {
      // 设计状态不触发点击事件
      if (!!this.designState) return
      // const item = { value: this.leftValue, label: this.leftLabel }
      const { onLeftClick } = this.field.options
      if (onLeftClick) {
        try {
          // const executeFunc = new Function('value', onClick)
          const executeFunc = new Function('item', onLeftClick)
          executeFunc.call(this, item)
        } catch (error) {
          console.error('解析onLeftClick数据出错！', error)
        }
      } else {
        this.formRenderDispatchEmit('btnGroupLeftClick', [item])
      }
    },
    /**
     * 右侧按钮组点击触发
     */
    onRightBtnClick() {
      // 设计状态不触发点击事件
      if (!!this.designState) return
      const leftItem = {
        value: this.leftValue, label: this.leftLabel,
      }
      const rightItem = {
        value: this.rightValue, label: this.rightLabel,
      }
      const { onRightClick } = this.field.options
      if (onRightClick) {
        try {
          const executeFunc = new Function('leftItem', 'rightItem', onRightClick)
          executeFunc.call(this, leftItem, rightItem)
        } catch (error) {
          console.error('解析onRightClick数据出错！', error)
        }
      } else {
        this.formRenderDispatchEmit('btnGroupRightClick', [{ leftItem, rightItem }])
      }
    },
    /**
     * 获取按钮组选择的值
     * 
     * return { leftItem: 左侧选择的值, rightItem: 右侧选择的值 }
     */
    getBtnGroupSelect() {
      const leftItem = {
        value: this.leftValue, lable: this.leftLabel,
      }
      const rightItem = {
        value: this.rightValue, lable: this.rightLabel,
      }
      return { leftItem, rightItem }
    },
    /**默认选中 */
    setLeftBtnGroupSelect(value) {
     // 设计状态不触发
      if (!!this.designState) return
      const array = this.field.options.fieldOptions
      array.forEach((item) => {
        if (item.value === value) {
          item.default = true
        } else {
          item.default = false
        }
      })
      // this.field.options.fieldOptions = array
    },
    /**隐藏 */
    setLeftBtnGroupHidden(value) {
      const array = this.field.options.fieldOptions
      array.forEach((item) => {
        if (item.value === value) {
          item.visible = true
        } else {
          item.visible = false
        }
      })
    },
  }
}
  </script>
  <style lang="scss" scoped>
.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.inline_flex {
  display: inline-flex;
}
</style>
  